<template>
	<u-keyboard
		ref="uKeyboard"
		v-model="show"
		mode="number"
		:tooltip="false"
		:dot-enabled="false"
		@change="change"
		@backspace="backspace"
	>
		<view slot="default" class="info">
			<view class="title">请输入支付密码</view>
			<u-message-input
				maxlength="6"
				dot-fill
				:value="value"
				:disabled-keyboard="true"
			></u-message-input>
		</view>
	</u-keyboard>
</template>

<script>
export default {
	data() {
		return {
			value: "",

			show: true
		}
	},
	methods: {
		change(e) {
			this.value += e
		},
		backspace() {
			if (this.value.length <= 0) return
			this.value = this.value.slice(0, -1)
		}
	},
	watch: {
		value(val) {
			if (val.length === 6) this.$emit("finish", val)
		}
	}
}
</script>

<style lang="scss" scoped>
.info {
	height: 100%;
	padding: 44rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	padding-bottom: 30rpx;
}
</style>
